<template>
  <view class="container">
    <!-- 替换组件的搜索图标 -->
    <uni-search-bar placeholder="请输入宠物相关字符" @input="SearchInput">
      <image class="searchImage" slot="searchIcon" src="/static/images/mine/sear.png" mode="widthFix"></image>
    </uni-search-bar>
    <!-- v-if="searchList.length !== 0" -->
    <view v-if="searchList.length !== 0" class="popup_box">
      <view class="popup_title">
        <block v-for="(item,i) in searchList" :key="i">
          <van-cell :border="false" :title="item.categoryName" @click="onsearchItem(item)"></van-cell>
        </block>
      </view>
    </view>

    <view class="searnav">
      <view class="scroll-view-container">
        <!-- 左侧的滚动视图区域 -->
        <scroll-view class="left-scroll-view" scroll-y :style="{height: wh - 52 + 'px'}">
          <block v-for="(item,i) in animalList" :key="i">
            <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
              {{item.title}}
            </view>
          </block>
        </scroll-view>
        <!-- 右侧的滚动视图区域 -->
        <scroll-view class="right-scroll-view" scroll-y :style="{height: wh - 52 + 'px'}">
          <block v-for="(item1,i1) in cateLevel2" :key="i1">
            <van-cell :title="item1.title" @click="onCellItem(item1,i1)"></van-cell>
          </block>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    SearchInputAll
  } from '@/api/user.js'
  export default {
    data() {
      return {
        // 当前选中项的索引，默认让第一项被选中
        active: 0,
        wh: 0,
        animalList: [],
        cateLevel2: [],
        searchList: []
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
      let app = getApp();
      app.globalData.animalList.forEach(x => {
        x.categoryType.forEach(item => {
          if(item == 0) {
            this.animalList.push(x)
          }
        })
      })
      // console.log(this.animalList)
      if(this.animalList.length != 0) {
        this.cateLevel2 = this.animalList[0].children
      }
    },
    methods: {
      // 选中项改变的事件处理函数
      activeChanged(i) {
        this.active = i
        // 为二级分类列表重新赋值
        this.cateLevel2 = this.animalList[i].children
      },
      SearchInput(e) {
        // console.log(e)
        if (e !== '') {
          SearchInputAll(e).then(res => {
            // console.log(res)
            this.searchList = res.data
          })
        } else {
          this.searchList = []
        }
      },
      onCellItem(item1, i1) {
        let pages = getCurrentPages(); //获取所有页面栈实例列表
        // console.log(pages)
        let prevPage = pages[pages.length - 2]; //上一页页面实例
        // console.log(item1)
        // console.log(i1)
        prevPage.$vm.Pet.varieties = item1.title
        prevPage.$vm.varietiesValue = item1.id
        prevPage.$vm.varietiesValueId = this.cateLevel2[i1].id
        uni.navigateBack()
      },
      onsearchItem(item) {
        let pages = getCurrentPages(); //获取所有页面栈实例列表
        // console.log(pages)
        let prevPage = pages[pages.length - 2]; //上一页页面实例
        // console.log(item)
        prevPage.$vm.Pet.varieties = item.categoryName
        prevPage.$vm.varietiesValue = item.id
        prevPage.$vm.varietiesValueId = item.parentId
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">
  /deep/ .van-cell {
    padding-top: 35rpx !important;
    padding-bottom: 35rpx !important;
    align-items: center;
    width: 100% !important;
    background-color: transparent !important;

    /deep/ .van-cell__title {
      font-size: 34rpx;
      line-height: 64rpx;
    }
  }

  /deep/ .uni-searchbar {
    position: relative;
    z-index: 5;
  }

  .container {

    position: relative;

    .searchImage {
      position: relative;
      z-index: 5;
      width: 38rpx;
      height: 38rpx;
    }

    .popup_box {
      position: absolute;
      top: 86rpx;
      width: 100%;
      z-index: 2;
      padding: 0 92rpx 20rpx 17rpx;
      box-sizing: border-box;

      .popup_title {
        padding: 20rpx 25rpx;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        background-color: #fff;
        // width: 100%;
        box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
      }
    }

    .searnav {
      padding: 15rpx;

      .scroll-view-container {
        display: flex;

        .left-scroll-view {
          width: 130px;
          border: 2rpx solid rgba(237, 237, 237, 0.5);

          .left-scroll-view-item {
            line-height: 96rpx;
            height: 96rpx;
            background-color: #ffffff;
            text-align: center;
            font-size: 32rpx;

            // 激活项的样式
            &.active {
              background-color: rgba(237, 237, 237, 1);
              position: relative;
            }
          }
        }
      }
    }
  }
</style>
